<template>
	<view :style="{
			background: itemData.style.bgcolor,
			padding: itemData.style.paddingTop + 'px ' + itemData.style.paddingLeft + 'px ' + itemData.style.paddingBottom + 'px ' + itemData.style.paddingLeft + 'px'
		}">
		<view class="drag optional" v-if="userInfo.detail">
			<view class="bg-box" :style="itemData.style.type == 8 ? 'height: 620rpx' : ''">
				<view class="news" @click="gotoPage('/pages/plus/chat/chat_list')">
					<image class="chat" src="/static/icon/chat.png" mode=""></image>
				</view>
				<view v-if="userInfo.msgCount != 0" class="news_num">
					{{userInfo.msgCount}}
				</view>
				<view class="d-s-c" style="z-index: 1;position: relative;margin-left: 20rpx;margin-top: 80rpx;">
					<view class="item-image">
						<image :src="userInfo.detail.avatarUrl" mode="aspectFill"></image>
					</view>
					<block v-if="itemData.style.type != 8">
						<view class="d-c d-b-s white" style="height: 102rpx;">
							<view class="d-c-c ">
								<text class="fb f32">{{ userInfo.detail.nickName }}</text>
								<text class="ml20 grade" v-if="userInfo.userGrade">{{ userInfo.userGrade }}</text>
							</view>
							<view>ID:{{ userInfo.detail.userId }}</view>
						</view>
					</block>
					<block v-if="itemData.style.type == 8">
						<view class="d-c d-b-s white">
							<view class="d-c-c ">
								<view class="fb f32">{{ userInfo.detail.nickName }}</view>
								<view class="d-f">
									<view class="ml20 grade8" v-if="userInfo.userGrade">
										{{ userInfo.userGrade }}{{ userInfo.detail.userId }}
										<text class="icon iconfont icon-jiantou" />
									</view>
								</view>
							</view>
							<!-- <view class="mt10">ID:{{ userInfo.detail.userId }}</view> -->
							<view class="mt30 d-f">
								<view class="userBox mr20" @click="gotoPage('/pages/user/set/set')">账号设置
								</view>
								<view class="userBox" @tap="logout()">切换账号</view>
							</view>
						</view>
					</block>

				</view>
				<view class="bg-base" :class="'bg-base-' + itemData.style.type"
					:style="{ backgroundImage: itemData.style.bgbase8 ? 'url(' + itemData.style.bgbase8 + ')': ''}">
				</view>
				<block v-if="itemData.style.type != 8">
					<view class="diy-Base" :style="{ background: itemData.style.background }">
						<view class="list column-3">
							<view class="item" @click="gotoPage('/pages/user/my-wallet/my-wallet')">
								<view class="item-text fb f32">{{ userInfo.detail.balance }}</view>
								<view class="item-text text-ellipsis">账户余额</view>
							</view>
							<view class="item item-center" :style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
								@click="gotoPage('/pages/user/points/points')">
								<view class="item-text fb f32">{{ userInfo.detail.points }}</view>
								<view class="item-text text-ellipsis">{{userInfo.setting.pointsName}}</view>
							</view>
							<view class="item" @click="gotoPage('/pages/user/my-coupon/my-coupon')">
								<view class="item-text fb f32">{{ userInfo.coupon }}</view>
								<view class="item-text text-ellipsis">优惠券</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="itemData.style.type == 8">
					<view class="diy-Base" :style="{ background: itemData.style.background }">
						<view class="d-a-c">
							<view class="p-0-20 border8L">
								<view class="item" @click="gotoPage(itemData.style.menu0Url)">
									<view class="item-text fb f32">
										<image :src="itemData.style.menu0img" mode="aspectFit" class="type8img"></image>
									</view>
									<view class="item-text text-ellipsis">{{itemData.style.menu0title}}</view>
								</view>
							</view>
							<view class="flex-1">
								<view class="list column-3">
									<view class="item" @click="gotoPage('/pagesLive/vip/upgradeList/upgradeList')">
										<view class="item-text fb f32">{{ parseInt(userInfo.agentMoney)}}</view>
										<view class="item-text text-ellipsis">佣金</view>
									</view>
									<view class="item item-center"
										:style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
										@click="gotoPage('/pages/user/points/points')">
										<view class="item-text fb f32">{{ userInfo.detail.points }}</view>
										<view class="item-text text-ellipsis">{{userInfo.setting.pointsName}}</view>
									</view>
									<view class="item" @click="gotoPage('/pages/user/my-wallet/my-wallet')">
										<view class="item-text fb f32">{{ parseInt(userInfo.detail.balance) }}
										</view>
										<view class="item-text text-ellipsis">账户余额</view>
									</view>
								</view>
								<view class="list column-3">
									<view class="item" @click="gotoPage(itemData.style.menu1Url)">
										<view class="item-text fb f32">
											<image :src="itemData.style.menu1img" mode="aspectFit" class="type8img">
											</image>
										</view>
										<view class="item-text text-ellipsis">{{itemData.style.menu1title}}</view>
									</view>
									<view class="item item-center"
										:style="'padding:0 ' + itemData.style.padding * 2 + 'rpx;'"
										@click="gotoPage(itemData.style.menu2Url)">
										<view class="item-text fb f32">
											<image :src="itemData.style.menu2img" mode="aspectFit" class="type8img">
											</image>
										</view>
										<view class="item-text text-ellipsis">{{itemData.style.menu2title}}</view>
									</view>
									<view class="item" @click="gotoPage(itemData.style.menu3Url)">
										<view class="item-text fb f32">
											<image :src="itemData.style.menu3img" mode="aspectFit" class="type8img">
											</image>
										</view>
										<view class="item-text text-ellipsis">{{itemData.style.menu3title}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: ['itemData', 'userInfo', 'msgCount'],
		created() {
			console.log(this.userInfo, 'base用户信息');
		},
		methods: {
			/*跳转页面*/
			gotoDetail(e) {
				console.log(e);
				this.gotoPage(e.linkUrl);
			},
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确定退出登录',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('userId');
							that.gotoPage('/pages/index/index');
						}
					}
				});


			},
		}
	};
</script>

<style lang="scss" scoped>
	.grade {
		display: block;
		padding: 0 16rpx;
		font-size: 22rpx;
		/* height: 36rpx; */
		line-height: 36rpx;
		border-radius: 40rpx;
		background-color: rgba($color: #000000, $alpha: 0.1);
		color: #ffffff;
	}

	.grade8 {
		display: block;
		padding: 0 16rpx 0 26rpx;
		font-size: 22rpx;
		line-height: 36rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #57575C, #363B3F);
		color: #ffffff;

		.icon-jiantou {
			font-size: 16rpx;
			margin-left: 10rpx;
			font-weight: bold;
		}
	}

	.userBox {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		padding: 10rpx 15rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.diy-Base {
		position: absolute;
		width: 710rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}

	.diy-Base .list {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.diy-Base .list .item {
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.diy-Base .list.column-3 .item {
		// width: 33.333333333%;
		width: 20%;
	}

	.diy-Base .list.column-4 .item {
		width: 25%;
	}

	.diy-Base .list.column-5 .item {
		width: 20%;
	}

	.diy-Base .list .item-image {
		width: 60%;
	}

	.diy-Base .list .item-image img {
		width: 100%;
	}

	.diy-Base .list .item-text {
		width: 100%;
		padding: 8rpx 0;
		text-align: center;
	}

	.bg-box {
		overflow: hidden;
		height: 410rpx;
		position: relative;

		.news {
			position: absolute;
			top: 40rpx;
			right: 20rpx;
			z-index: 100;

			.chat {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.news_num {
			position: absolute;
			top: 24rpx;
			right: 44rpx;
			z-index: 100;
			border-radius: 50%;
			width: 25rpx;
			height: 25rpx;
			text-align: center;
			line-height: 25rpx;
			color: #FFFFFF;
			background-color: #ff6633;
			padding: 5rpx;
			font-size: 20rpx;
		}
	}

	.bg-base {
		width: 160%;
		height: 600rpx;
		position: absolute;
		right: 0;
		left: -30%;
		top: -194rpx;
		bottom: 0;
		margin: auto;
		border-radius: 50% 50% 50% 50%;
	}

	.bg-base-1 {
		background-color: #ff5704;
	}

	.bg-base-2 {
		background-color: #19ad57;
	}

	.bg-base-3 {
		background-color: #ffcc00;
	}

	.bg-base-4 {
		background-color: #33a7ff;
	}

	.bg-base-5 {
		background-color: #e4e4e4;
	}

	.bg-base-6 {
		background-color: #c8ba97;
	}

	.bg-base-7 {
		background-color: #623ceb;
	}

	.bg-base-8 {
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 0;
		height: 440rpx;
	}

	.item-image {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		background-color: #fff;
		overflow: hidden;
		margin-right: 20rpx;

		image {
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
			background-color: #fff;
		}
	}

	.d-c-s {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.bind_phone {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: 20rpx 0;

		.bind_content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #ffffff;
			/* box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1); */
			border-radius: 16rpx;
			height: 100%;
			padding: 0 20rpx;
		}
	}

	.type8img {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 10rpx;
	}

	.border8L {
		border-right: 1rpx solid #f5f5f5;
		// margin-right: 20rpx;
	}
</style>